<template>
    <div id="category">
        <!-- 头部 -->
        <Header/>
        <!-- 内容 -->
        <div class="listWrapper" v-if="!showLoading">
            <!-- 左侧分类 -->
            <div class="leftWrapper">
                <ul class="wrapper">
                    <li class="categoryItem" 
                    v-for="(cate,index) in categoriesData"
                    :class="{selected:index==currentIndex}" 
                    @click="clickLeftLi(index)"
                    ref="menuList"
                    :key="cate.id">
                        <span class="textWrapper">{{cate.name}}</span>
                    </li>
                    
                </ul>
            </div>
            <!-- 右边 -->
            <ContentView :categoriesDetailData="categoriesDetailData"/>
        </div>
        <van-loading 
        style="position:absolute;left:50%;top:40%;transform:translate(-50%)" 
        v-else type="spinner" 
        color="#75a342" >拼命加载中...</van-loading>
    </div>
</template>
<script>
import Header from './components/Header'
import ContentView from './components/ContentView'
import BScroll from 'better-scroll';
import {mapMutations} from 'vuex'
import {getCategories,getCategoriesDetail} from './../../server/api/index'
// 4. 引入通讯组件
import PubSub from 'pubsub-js'
import {Toast} from 'vant';
export default {
    name:'Category',
    data(){
        return {
            showLoading: false,
            // 左侧列表数据
            categoriesData:[],
            // 右边列表数据
            categoriesDetailData:[],
            currentIndex:0,
            // leftScroll:'',
        }
    },
    created(){
        this.initData();
    },
    methods:{
        ...mapMutations(['ADD_GOODS']),
       async initData(){
            // 获取左边数据
            let leftRes = await getCategories();
            if(leftRes.success){
                this.categoriesData = leftRes.data.cate;
            }
            // 获取右边数据
            let rightRes = await getCategoriesDetail('/lk001');
            if(rightRes.success){
                this.categoriesDetailData = rightRes.data.cate;
            }
            console.log('categoriesdata',this.categoriesDetailData)
            // 隐藏loading
            this.showLoading = false;
            // 初始化滚动框架
            this.$nextTick(()=>{
                 if (!this.leftScroll) {
                    this.leftScroll = new BScroll('.leftWrapper', {
                    probeType:3,
                    click:true,
                    scrollY:true,
                    tap:true,
                    mouseWheel:true
                    });
                  } else {
                    this.leftScroll.refresh();
                  };
                // this.leftScroll = new BScroll('.leftWrapper',{probeType:3}); // probeType 0 1 2 3 滚动触发灵敏度
                // console.log('leftScroll',this.leftScroll);
            });
        },
        async clickLeftLi(index){
            this.currentIndex = index;
            let menuList = this.$refs.menuList;
            let el = menuList[index];
            // 滚动到点击的元素上
            this.leftScroll.scrollToElement(el,300);
            // 获取对应的右方数据
            let rightRes = await getCategoriesDetail(`/lk00${index+1}`);
            if(rightRes.success){
                this.categoriesDetailData = rightRes.data.cate;
            }
        }
    },
    
        beforeDestroy(){
            PubSub.unsubscribe('categoryAddToCart');
        },
    
    mounted(){
        //订阅消息(添加到购物车)
        PubSub.subscribe('categoryAddToCart',(msg,goods)=>{
            if(msg === 'categoryAddToCart'){
                this.ADD_GOODS({
                    goodsId:goods.id,
                    goodsName:goods.name,
                    smallImage:goods.small_image,
                    goodsPrice:goods.price
                });
            }
            
            // 提示用户
            Toast({
                message:'添加成功',
                duration:800
            });

        })
    },
    components:{
        Header,
        ContentView
    }
}
</script>
<style scoped>
 #category {
        width: 100%;
        height: 100%;
        background-color: #F5F5F5;
        overflow: hidden;
    }

    .listWrapper {
        position: fixed;
        top: 50px;
        bottom: 50px;
        width: 100%;
        height: 100%;
        overflow: hidden;
        display: flex;
    }

    .leftWrapper {
        background-color: #F4F4F4;
        width: 5.3125rem;
        flex: 0 0 5.3125rem;
    }

    .categoryItem {
        padding: 0.75rem 0;
        border-bottom: solid 1px #E8E9E8;
        position: relative;
    }

    .categoryItem .textWrapper {
        line-height: 1.25rem;
        border-left: solid 0.1875rem transparent;
        padding: 0.3125rem 0.6875rem;
        font-size: 0.8125rem;
        color: #666666;
    }

    .categoryItem.selected {
        background: #FFF;
    }

    .categoryItem.selected .textWrapper {
        border-left-color: #3cb963;
        font-weight: bold;
        font-size: 0.875rem;
        color: #333333;
    }

    @media (min-width: 960px) {
        .wrapper {
            border-right: 1px solid #E8E9E8;
        }

        .wrapper .categoryItem {
            background: #fff;
        }
    }
</style>